<template>
    <fieldset>
        <legend>产品</legend>
        <h1>商品:Product</h1>
        <ul>
            <li v-for="item in productData" :key='item.id'>
                <b>
                    产品名称：{{item.title}}
                </b>
                -------
                <b>
                    产品价格：{{item.price}}
                </b>
                -------
                <b>
                    库存：{{item.inventory}}
                </b>
                <button :disabled="item.inventory===0"     @click=addCart(item)>+点击加入购物车</button>

            </li>
        </ul>
    </fieldset>
</template>
<script>
import {mapState,mapActions} from "vuex"
export default{
    methods:{
        addCart(current){
            console.log(current)
            this.ADD_CART(current)

        },
        ...mapActions('product',['FETCH_PRODUCT']),

        ...mapActions("cart",['ADD_CART'])

    },
    computed:{
        ...mapState('product',['productData'])
    },
    mounted(){
        this.FETCH_PRODUCT()
    }
}
</script>
